<template>
  <van-tabbar v-model="active" active-color="rgb(194, 41, 158)">
    <van-tabbar-item to="/" icon="fire">首页</van-tabbar-item>
    <van-tabbar-item to="/two" icon="friends">详情</van-tabbar-item>
    <van-tabbar-item to="/three" icon="diamond">技师</van-tabbar-item>
    <van-tabbar-item to="/wode" icon="manager">我的</van-tabbar-item>
  </van-tabbar>
</template>

<script setup lang='ts'>
import { ref, watch } from 'vue';
import { useRoute } from 'vue-router';
const route = useRoute();

// 底部导航的激活索引
// 这个地方我们进行了 TS 的类型约束，我们也可以不写，当然这个代表的是 类型推断
const active = ref<number>(0)
console.log(route.path);

switch (route.path) {
  case "/one/recommended":
    active.value = 0;
    break;
  case "/one/fresh":
    active.value = 0;
    break;
  case "/two":
    active.value = 1;
    break;
  case "/three":
    active.value = 2;
    break;
  case "/wode":
    active.value = 3;
    break;
  case "/me":
    active.value = 4;
    break;
  default:
    active.value = 1;
    break;
}

watch(() => route.path, (newval) => {
  console.log("路由发生了切换操作", newval);
  switch (newval) {
    case "/one/recommended":
    active.value = 0;
    break;
  case "/one/fresh":
    active.value = 0;
    break;
  case "/two":
    active.value = 1;
    break;
  case "/three":
    active.value = 2;
    break;
  case "/wode":
    active.value = 3;
    break;
  case "/me":
    active.value = 4;
    break;
  default:
    active.value = 1;
    break;
  }
})

</script>

<style scoped lang='scss'>
</style>